<template>
	<view class="password">
		<u-toast ref="uToast"></u-toast>
		<u-form labelPosition="left" :model="addForm" :rules="rules" ref="form">
			<u-form-item prop="captcha" borderBottom ref="item1">
				<u-input v-model="addForm.captcha" border="none" placeholder="请输入验证码">
					<template slot="suffix">
						<u-code ref="uCode" @change="codeChange" seconds="60"></u-code>
						<u-button type="primary" :plain="true" @tap="getCode" :text="tips" size="mini"></u-button>
					</template>
				</u-input>
			</u-form-item>
			<u-form-item label="新密码" labelWidth="100" prop="password" borderBottom ref="item1">
				<u-input v-model="addForm.password" border="none" placeholder="请输密码"></u-input>
			</u-form-item>
			<u-form-item label="确认密码" labelWidth="100" prop="newpassword" borderBottom ref="item1">
				<u-input v-model="addForm.newpassword" placeholder="请确认密码" border="none"></u-input>
			</u-form-item>
		</u-form>
		<view class="mar_top mar_bottom">
			<u-button text="完成" shape="circle" type="primary" @click="confirm" throttleTime="3000"></u-button>
		</view>
	</view>
</template>

<script>
	import {
		send,
		resetpwd,
		editpwd
	} from '@/api/login.js'
	export default {
		data() {
			return {
				tips: '',
				addForm: {
					newpassword: '',
					password: '',
					captcha: '',
					mobile: ''
				},
				rules: {
					'newpassword': [{
						required: true,
						message: '请确认密码',
						trigger: ["blur"]
					}, {
						validator: (rule, value, callback) => {
							if (value !== this.addForm.password) return false
							return true
						},
						message: "两次密码输入的不一致",
						trigger: ["blur"],
					}],
					'password': {
						required: true,
						message: '请输密码',
						trigger: ['blur']
					},
					'captcha': {
						required: true,
						message: '请输验证码',
						trigger: ['blur']
					}
				},
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		onShow() {
			this.addForm.mobile = this.$store.state.mobile
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			// 获取验证码
			getCode() {
				if (this.addForm.mobile) {
					if (this.$refs.uCode.canGetCode) {
						uni.showLoading({
							title: '正在获取验证码',
							mask: true
						})
						send({
							mobile: this.addForm.mobile
						}).then(res => {
							uni.hideLoading();
							this.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}).catch(err => {
							this.$u.toast(err.msg);
						})
					} else {
						this.$u.toast('倒计时结束后再发送');
					}
				} else {
					this.$u.toast('请尝试重新登录');
				}
			},
			confirm() {
				this.$refs.form.validate().then(res => {
					let parasm = {
						captcha: this.addForm.captcha,
						newpassword: this.addForm.newpassword
					}
					editpwd(parasm).then(res => {
						this.$refs.uToast.show({
							message: res.msg,
							icon: false,
							type: 'success',
							complete: function() {
								uni.showModal({
									title: '提示',
									content: '请重新登录',
									showCancel: false,
									success: function(res) {
										uni.reLaunch({
											url: "/pages/login/index",
											success: function(res) {
												uni.clearStorageSync();
											}
										});
									}
								})
							}
						})
					}).catch(err => {
						this.$refs.uToast.show({
							message: err.msg,
							type: 'error',
							icon: false
						})
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.password {
		background-color: #fff;
		padding: 0 20rpx;
	}
</style>
